<template>
  <el-upload
    :file-list="fileList"
    class="avatar-uploader"
    action="http://localhost:3700/upload-excel"
    :show-file-list="false"
    :on-success="(res, file)=>handleAvatarSuccess(res,file)"
    :before-upload="beforeAvatarUpload"
    :on-change="handleChange"
    :limit="1"
    :auto-upload="true"
  >
    <el-button type="primary" plain size="small">{{btuText}}</el-button>
  </el-upload>
</template>

<script>
export default {
  name: "uupload",
  props: {
    btuText: {
      type: String,
    },
    img_src: {
      type: String,
    },
    img_attr:{
      type:Object,
      default:() => {
        return {
          size:1,
          width:35,
          height:35
        }
      }
    }
  },
  data() {
    return {
      fileList:[],
    }
  },
  mounted() {
  },
  methods:{
    /**
     * 图片上传前校验
     */
    beforeAvatarUpload(file){
      // console.log(file.type)
      // console.log(this.img_attr.size)
      // let limitSize =this.img_attr.size? this.img_attr.size:1
      // const isLt2M = file.size / 1024 / 1024 < limitSize
      // const isJPG =
      //   file.type === 'image/jpeg' ||
      //   file.type === 'image/png' ||
      //   file.type === 'image/jpg'
      //
      // if (!isJPG) {
      //   this.$message.error('上传图片只能是 JPG/PNG 格式!')
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传图片大小不能超过 1MB!您图片大小为:' + file.size / 1024 / 1024 + 'MB')
      // }
      return true
    },
    /**
     * 图片上传成功
     * @param res
     * @param file
     * @param row
     */
    handleAvatarSuccess(res, file) {
      this.fileList=[]
      this.$emit("returnSrc",res.imageUrl)
    },
    handleChange(file, fileLists) {
      console.log(file);
      console.log(fileLists);
      // 本地服务器路径
      console.log(URL.createObjectURL(file.raw));
      // 本地电脑路径
      console.log(document.getElementsByClassName("el-upload__input")[0].value);
    },
  }
}
</script>

<style scoped>

</style>
